import React, { memo, useState, useEffect  } from 'react'
import type { ReactNode } from 'react'
import { TopAlbumWrapper } from './style'
import DjRadioHeader from '@/components/djradio-header'
import { useAppSelector, shallowEqualApp, useAppDispatch } from '@/store'

import AlbumItem from '@/components/album-item'
import SongsPagination from '@/components/songs-pagination'
import {fetchTopAlbumsAction} from '@/views/discover/c-page/album/store/album'
interface IProps {
  children?: ReactNode
}

const TopAlbum: React.FC<IProps> = () => {
  const { topAlbumList, total } = useAppSelector(
    (state) => ({
      topAlbumList: state.album.topAlbums,
      total: state.album.total
    }),
    shallowEqualApp
  )
 const [currentPage, setCurrentPage] = useState(1)
  const dispatch = useAppDispatch()
   useEffect(() => {
    setCurrentPage(1)
  }, [])

    function onPageChange(page: number) {
    setCurrentPage(page)
    const offset = (page - 1) * 35
    dispatch(
      fetchTopAlbumsAction({
        offset,
        limit: 35
      })
    )}
  return (
    <TopAlbumWrapper>
      <DjRadioHeader title="全部新碟" />
      <div className="album-list">
        {topAlbumList.map((item) => (
          <AlbumItem
            key={item.id}
            itemData={item}
            size={'130px'}
            bgp={'-845px'}
            width={'165px'}
          />
        ))}
      </div>
      <SongsPagination
        currentPage={currentPage}
        total={total}
        onPageChange={onPageChange}
      />
    </TopAlbumWrapper>
  )
}

export default memo(TopAlbum)
